<template>
  <div>
    <!-- cinema/ShowingonPlanAdd.vue -->
    <span style="color:#3f9dff; font-weight:bold;">
      {{roomInfo.cinema_name}}
    </span>
    的
    <span style="color:#3f9dff; font-weight:bold;">
      {{roomInfo.cinema_room_name}}（{{roomInfo.cinema_room_type}}）
    </span>
    的排片计划列表
    <el-divider></el-divider>

    <!-- 准备好静态表格页 -->
    <el-table :data="plans">
      <el-table-column prop="title" label="电影名称"></el-table-column>
      <el-table-column prop="showingon_date" label="放映时间"></el-table-column>
      <el-table-column prop="showingon_time" label="场次"></el-table-column>
      <el-table-column label="票价">
        <template slot-scope="scope">
          {{scope.row.price}} 元
        </template>
      </el-table-column>
      <el-table-column label="是否已发布" width="180px">
        <template slot-scope="scope">
          <el-switch 
            @change="changeStatus(scope.row.plan_id,$event)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
           @click="deleteItem(scope.row)"
           size="small" type="danger" icon="el-icon-delete" circle>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import httpApi from '@/http'
export default {
  data() {
    return {
      roomInfo: {},   // 保存放映厅的基本信息
      plans: [], // 存储需要显示的排片计划数组
    }
  },
  methods: {

    deleteItem(e){
                console.log(e)
                 this.$confirm('此操作将永久删除电影, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          httpApi.showingonPlanApi.delete({id:e.plan_id}).then(res=>{
          console.log('删除了',res)
          if(res.data.code==200){
            this.initPlans()
          }
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
            },

    // 修改发布状态
    changeStatus(newval,$event){
      console.log(newval)
      console.log($event)
      switch($event){
        case 0:
          httpApi.showingonPlanApi.noPublish({id:newval}).then(res=>{
            console.log('发布状态',res)
          })
          break;
        case 1:
             httpApi.showingonPlanApi.publish({id:newval}).then(res=>{
            console.log('发布状态',res)
          })
      }

    },
    /** 加载放映厅的基本信息 */
    initRoomData() {
      let id = this.$route.params.roomId
      httpApi.cinemaRoomApi.queryById({id}).then(res=>{
        console.log('加载放映厅的基本信息', res)
        this.roomInfo = res.data.data
      })
    },

    /** 加载排片计划列表 */
    initPlans(){
      let params = {room_id: this.$route.params.roomId}
      httpApi.showingonPlanApi.queryByRoomId(params).then(res=>{
        console.log('加载排片计划列表', res)
        this.plans = res.data.data
      })
    },
  },

  mounted () {
    // 加载放映厅的基本信息
    this.initRoomData()
    // 加载放映厅中所有的排片计划
    this.initPlans()
  },

};
</script>

<style lang="scss" scoped>
</style>